<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .svg-container {
      width: 100%;
      height: auto;
      overflow: hidden;
    }

    .svg-container svg {
      width: 100%;
      height: auto;
      display: block;
    }
  </style>
</head>
<body style="background: #000">
<div class="svg-container">
  <svg viewBox="0 0 1525 18970">
    <path
      id="myPath"
      fill-rule="evenodd"
      stroke="rgb(255, 255, 255)"
      stroke-width="2px"
      stroke-dasharray="8, 4"
      stroke-linecap="butt"
      stroke-linejoin="miter"
      fill="none"
      d="M681.1000,18966.999 C-75.030,18893.478 428.785,18126.722 778.1000,18189.1000 C1017.458,18233.084 944.241,17943.810 1108.384,17723.997 C1541.853,17143.518 956.680,16667.858 1053.498,16731.864 C705.105,16501.541 87.652,16179.925 322.1000,15911.1000 C642.468,15548.308 1227.555,16090.897 1084.1000,16453.1000 C949.177,16799.954 1236.433,16583.865 1311.1000,15955.999 C1387.566,15328.133 683.964,15242.042 348.1000,14785.1000 C14.036,14329.957 975.187,14326.082 1182.1000,13765.1000 C1390.813,13205.917 648.060,13678.111 376.1000,13665.1000 C105.940,13653.887 488.485,13462.121 1030.1000,13013.999 C1573.515,12565.878 977.640,12479.463 439.1000,12341.999 C-201.095,12178.084 -15.917,11700.206 233.1000,11536.999 C517.036,11352.165 656.099,11291.140 1046.1000,11081.999 C1860.261,10646.886 525.059,10440.333 383.1000,10088.999 C242.941,9737.665 1028.069,9531.451 1188.1000,9441.999 C1456.661,9293.223 1450.858,9020.858 427.1000,8921.999 C-234.014,8858.015 1213.317,8760.941 1142.1000,8310.999 C1100.388,8038.335 164.109,7876.762 272.279,7534.499 C323.470,7372.523 542.059,7372.294 437.1000,7465.999 C333.940,7559.705 284.970,7492.475 264.065,7179.188 C241.317,6838.277 437.056,6593.262 1146.136,6383.918 C1845.724,6177.378 526.464,5899.604 356.1000,5504.999 C168.422,5065.886 460.054,4753.477 757.1000,4405.998 C821.769,4331.629 904.754,4258.948 1001.1000,4167.999 C1107.619,4069.220 1105.647,4010.163 1144.486,3901.605 C1383.795,3232.710 329.729,4661.500 1041.1000,3932.1000 C1416.463,3550.003 1265.656,3262.894 1009.306,3007.844 C912.624,2911.652 1028.579,2777.964 1121.1000,2644.999 C1200.921,2532.673 1221.680,2486.336 1255.706,2403.241 C1353.415,2164.627 1153.834,1998.212 793.352,2155.804 C351.119,2349.133 185.039,2257.251 423.534,1878.971 C486.811,1778.605 576.008,1684.492 672.842,1597.430 C829.695,1456.406 902.607,1311.023 986.876,1246.315 C1096.495,1162.143 1246.372,1027.267 1225.773,919.077 C1222.345,901.077 1217.938,883.307 1212.806,865.933 C1147.782,645.799 1051.424,551.057 1268.1000,284.999 C1421.134,98.967 1510.040,76.827 1521.1000,1.999 "/>
    <image
      id="myImage"
      href="https://lagrang.oss-cn-hangzhou.aliyuncs.com/common-upload/1.png"
      width="120"
      height="120"/>
  </svg>
</div>
<script>
  const path = document.getElementById('myPath');
  const circle = document.getElementById('myImage');
  const pathLength = path.getTotalLength();
  const duration = 10000; // 动画总时长10秒
  let startTime = null;
  let progress = 0; // 动画的当前进度（0到1之间）
  let paused = false;
  let previousProgress = 0; // 保存之前的进度，以便恢复动画时从暂停处继续

  function animate(timestamp) {
    if (!startTime) startTime = timestamp;
    const elapsed = timestamp - startTime;

    // 更新进度，只要没有暂停
    if (!paused) {
      progress = previousProgress + (elapsed / duration);
    }

    if (progress > 1) {
      progress = 1;
    }

    const point = path.getPointAtLength((1 - progress) * pathLength);
    circle.setAttribute("x", point.x - 60);
    circle.setAttribute("y", point.y - 60);

    // 检查圆是否到达了视口的底部
    const rect = circle.getBoundingClientRect();
    if (rect.bottom - 60 >= window.innerHeight) {
      paused = true; // 暂停动画
      previousProgress = progress; // 保存进度
    }

    // 在控制台中显示进度
    console.log(`Progress: ${(progress * 100).toFixed(2)}%`);

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  function handleScroll() {
    const rect = circle.getBoundingClientRect();
    // 检查圆是否不再处于视口底部
    if (rect.bottom < window.innerHeight && paused) {
      paused = false; // 恢复动画
      startTime = null; // 重新设置startTime以便正确计算下一帧
      requestAnimationFrame(animate);
    }
  }

  window.addEventListener('scroll', handleScroll);
  requestAnimationFrame(animate);
</script>
</body>
</html>
